<template>
  <div>
    <!-- 卡片组件 -->

    <el-card class="box-card" style="width: 95%; margin: 10px auto">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="showDialog">添加</el-button>

      <!-- 对话框 -->
      <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="品牌名称" Label-width="100px">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" label-width="100px">
            <el-upload class="avatar-uploader" :action="`${baseUrl}/admin/product/upload`" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img src="imageUrl" v-if="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload_tip">只能上传jpg/png文件，且不能超过500kb</div>

            </el-upload>


          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 表格组件 -->
      <el-table :data="records" style="width: 100%; margin-top: 20px" border>
        <!-- 表格当中的每一列 -->
        <el-table-column prop="date" label="序号" width="80" type="index" align="center">
        </el-table-column>
        <el-table-column prop="tmName" label="品牌名称"> </el-table-column>
        <el-table-column prop="address" label="品牌logo" label-width="100px">
          <template v-slot="{ row, $index }">
            <img :src="row.logoUrl" style="width: 100px; height: 60px" />
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作">
          <template v-slot="{ row, $index }">
            <el-button type="warning" icon="el-icon-edit-outline" size="small"
              @click="updateTradeMark(row)">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTradeMark(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top: 20px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page" :page-sizes="[3, 5, 7, 9]" :page-size="limit"
        layout="prev, pager, next, jumper,->,sizes,total" :total="total">
      </el-pagination>
    </el-card>

    <!-- 弹出框 -->
    <!--v-model="Dialog" 控制弹出框显示和隐藏  -->

    <el-dialog :title="tmName ? '修改品牌' : '添加品牌'" :visible="Dialog" top="0">
      <!-- 表单组件 -->
      <el-form :inline="true" style="width: 80%" :model="tmForm">
        <el-form-item label="品牌名称" label-width="100px">
          <el-input style="width: 400px" v-model="tmName" />
        </el-form-item>


      </el-form>

      <!-- 按钮组件 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrUpdateTm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入vue2的element组件,卡片组件
import { Button } from "element-ui";
// 导入接口函数
import { reqGetTrademarkList, addPostTrademark, reqdeleteTrademark } from "@/api/trademark";

export default {
  name: "tradmeark",
  data() {
    return {
      page: 1, //页码
      limit: 3, //每页显示的条数
      records: [], //品牌列表
      total: 0, //总条数
      Dialog: false, //控制弹框的显示和隐藏
      imageUrl: "", //图片的地址
      baseUrl: "/app-dev",
      tmName: "", //品牌名称
      tmForm: {
        tmName: '',
        logoUrl: ''
      },
      dialogFormVisible: false,
      imageUrl: ''

    };
  },




  //组件挂载到页面的时候发送请求获取数据
  mounted() {
    this.getTrademarkList();
  },

  methods: {
    //定义获取品牌列表的函数
    async getTrademarkList() {
      // 解构
      try {
        let { page, limit } = this;
        const res = await reqGetTrademarkList(page, limit);
        //  修改品牌数据
        this.records = res.data.records;
        this.total = res.data.total;
      } catch (err) {
        // 弹框提示
        this.$message({
          type: "error",
          message: "获取品牌列表失败",
        });
      }
    },
    handleAvatarSuccess(res, file) {
      console.log(222);
      // this.imageUrl=URL.createObjectURL(file,raw);
      this.tmForm.logoUrl = res.data
    },
    showDialog() {
      this.dialogFormVisible = true;
    },
    updateTradeMark() {
      this.dialogFormVisible = true
    },

    // 删除品牌的逻辑
    deleteTradeMark(row) {
      this.$confirm(`你确定删除${row.tmName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //当用户点击确定按钮的时候触发
        //向服务器发请求
        let result = await this.$API.trademark.reqDeleteTradeMark(row.id)
        if (result.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //再次获取品牌列表数据
          this.getPageList(this.list.length > 1 ? this.page : this.page - 1)
        }
      }).catch(() => {
        //当用户点击取消按钮的时候触发
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },


  // 页大小改变的回调
  handleSizeChange(res) {
    // 修改的的时候会接受到一个新的页大小
    // 修改页大小
    this.limit = res;
    // 重新发送请求
    this.getTrademarkList();
  },

  //页码改变的回调
  handleCurrentChange(res) {
    // 修改页码
    this.page = res;
    // 重新发送请求
    this.getTrademarkList();
  },


  addTrademark() {
    this.Dialog = true;
  },



  cancel() {
    // 关闭弹出框
    this.Dialog = false;
    // 清空上一次输入框和图片的值
    this.tmName = ''
    this.imageUrl = ''
  },
  // cnacel(){
  //   this.Dialog=false;
  //   this.tmName=''
  //   this.imageUrl=''
  // }



  // 修改品牌的逻辑,
  changeOnebrand(row) {  //接受到一个参数,这个参数就是当前点击的这一项
    //显示弹出框
    this.Dialog = true;

  },


}



</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: red;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
